<script>

export default {
  name: 'BlogListComponent',
  props: {
    type: {
      type: Number,
      default: 1
    },
    categoryId: {
      type: [String, Number],
      default: ''
    },
    tagId: {
      type: [String, Number],
      default: ''
    }
  },
  data () {
    return {
      blogList: [],
      noScroll: false,
      page: 1,
      loading: false,
      basePath: process.env.VUE_APP_BASE_PATH,
      apiHref: 'admin'
    }
  },
  watch: {
    categoryId () {
      this.page = 1
      this.noScroll = false
      this.blogList = []
      this.getBlogList()
    },
    tagId () {
      this.page = 1
      this.noScroll = false
      this.blogList = []
      this.getBlogList()
    }
  },
  methods: {
    getBlogList () {
      if (!this.noScroll) {
        this.loading = true
        let url = 'api/blog/list/' + this.page
        let params = {}
        if (this.type === 2) {
          url = 'api/blog/category/list'
          params = { page: this.page, categoryId: this.categoryId }
        }
        if (this.type === 3) {
          url = 'api/blog/tag/list'
          params = { page: this.page, tagId: this.tagId }
        }
        this.$axios.get(url, { params }).then(data => {
          if (data.current <= data.pages) {
            this.blogList.push(...data.records)
            this.page++
          } else {
            this.noScroll = true
          }
        }).catch(e => e).finally(() => {
          this.loading = false
        })
      }
    },
    handlerScroll () {
      /* 获取滚动条高度 */
      const scrollTop = document.documentElement.scrollTop
      /* 获取页面滚动条总长度 */
      const scrollHeight = document.querySelector('.content').scrollHeight
      /* 获取浏览器高度 */
      const windowHeight = window.innerHeight
      /* 判断滚动条是否触底 */
      if (scrollHeight - scrollTop === windowHeight) {
        this.getBlogList()
      }
    }
  },
  created () {
    this.$nextTick(() => {
      this.apiHref = sessionStorage.getItem('api') || 'admin'
      this.getBlogList()
    })
  },
  mounted () {
    window.addEventListener('scroll', this.handlerScroll, true)
  },
  destroyed () {
    window.removeEventListener('scroll', this.handlerScroll)
  }
}
</script>

<template>
  <div class="blog">
    <div class="blog-list">
      <div v-for="blog in blogList" :key="blog.blogId" class="blog-item">
        <div class="blog-info">
          <div class="title" ><router-link :class="{'no-cover':!blog.cover}" :title="blog.title" :to="`/${apiHref}/blog/${blog.blogId}`">{{blog.title}}</router-link></div>
          <div class="tags">
            <el-tag v-for="tag in blog.blogTagList" :key="tag.id" size="small" effect="plain" type="success">{{ tag.tag.name }}</el-tag>
          </div>
          <div class="total">
            <div class="read">浏览量：{{ blog.readCount }}</div>
            <div v-if="blog.hasComment === 1" class="comment">评论数：{{ blog.commentCount }}</div>
          </div>
          <div class="info">
            <div class="time">发表时间：{{ blog.applyTime }}</div>
          </div>
        </div>
        <div v-if="blog.cover" class="blog-cover">
          <router-link to="`blog/${blog.blogId}`">
            <img v-if="blog.cover.startsWith('http')" :src="blog.cover" alt="">
            <img v-else :src="basePath+blog.cover" alt="">
          </router-link>
        </div>
      </div>
      <p v-if="noScroll&&blogList.length>0" style="text-align: center">我也是有底线的~！</p>
      <p v-if="!loading&&blogList.length===0" style="text-align: center">暂无数据~！</p>
      <p v-if="loading" style="text-align: center">加载中...</p>
    </div>
  </div>
</template>

<style scoped lang="scss">
.blog{
  width: 860px;
  display: flex;
  .blog-list{
    width: 850px;
    overflow: hidden;
    .blog-item{
      height: 140px;
      margin: 10px 5px 10px 0;
      padding: 10px;
      display: flex;
      background-color: #e8ecef;
      border-radius: 10px;
      .blog-info{
        flex: 1;
        &>div{
          height: 30px;
          display: flex;
          align-items: center;
        }
        .title{
          height: 40px;
          font-size: 20px;
          font-weight: bold;
          align-items: start;
          a{
            width: 620px;
            color: black;
            display: block;
            white-space: nowrap;/*设置文本内容不换行*/
            overflow: hidden;
            text-overflow: ellipsis;
            &:hover{
              text-decoration: underline !important;
            }
            &.no-cover{
              width: 820px;
            }
          }
        }
        .info{
          display: flex;
          align-items: end;
          justify-content: space-between;
        }
        .total{
          display: flex;
          &>div{
            margin-right: 10px;
          }
        }
      }
      .blog-cover{
        width: 200px;
        a{
          height: 100%;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          img{
            display: block;
            height: 100%;
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
